<template>
<div class="catrgory">
      <el-row>
          <el-col :span="24">
              <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item><a href="#">商品管理</a></el-breadcrumb-item>
                  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
              </el-breadcrumb>
          </el-col>
      </el-row>
      <el-row>
            <el-button type="success" plain @click="addCatories()">添加分类</el-button>
      </el-row>
       <tree-grid
       class="tree"
        :treeStructure="true"
        :columns="columns"
        :data-source="dataSource"
        @deleteCate="deleteCategory"
        @editCate="editCategory"
      >
    </tree-grid>
     <!-- 分页 -->
      <div class="page">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page=1
              :page-sizes="[2, 4, 6, 8]"
              :page-size="1"
               layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      </div>
      <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="adddialogFormVisible">
          <el-form :model="addform" label-width="80" :rules="rules" ref="addformName">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="addform.cat_name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级名称">
            <el-cascader
                :options="options"
                v-model="selectedOptions"
                :props="props"
                @change="handleChange">
            </el-cascader>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="adddialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="adduserSubmit('addformName')">确 定</el-button>
          </div>
        </el-dialog>
</div>
</template>
<script>
import TreeGrid from "@/components/TreeGrid/TreeGrid.vue"
import {getCategories,addCategories} from '@/api/index'
export default {
   data(){
       return{
        adddialogFormVisible:false, 
        pagesize:1,
        pagenum:1, 
        total:0,
        options: [], // 级联选择器的数据源
        selectedOptions: [], // 级联选择器选中后的数据
        // props表示配置级联选择器展示的数据字段
        props: {
            value: 'cat_id',
            label: 'cat_name'
        },
        addform:{
            cat_name:'',
            cat_pid:'',
            cat_level:''
            },
        dataSource: [],
        columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
        }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
        }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
        }],
        rules:{
            cat_name:[
                  { required: true, message: '请输入分类名称', trigger: 'blur' }
            ]
        }
        }
       },
       created(){
        this.initCategory()
       },
       methods: {
        deleteCategory (cid) {
            console.log(cid)
        },
        editCategory (cid) {
            console.log(cid)
        },
        handleChange(val) {
        console.log(val)
        },
        handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.initCategory();
        },
        handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.initCategory();
        },
        initCategory(){
         getCategories({type:"3",pagenum:this.pagenum,pagesize:this.pagesize}).then(res=>{
             console.log(res,12);
             if(res.meta.status === 200){
                 this.total = res.data.total;
                 this.dataSource = res.data.result 
             }
         })
        },
        addCatories(){
            this.adddialogFormVisible = true,
            getCategories({type:'2'}).then(res=>{
                console.log(res);
                if(res.meta.status === 200){
                    this.options =res.data
                }
            })
        },

        /* 添加分类 */
        adduserSubmit(addformName){
            this.$refs[addformName].validate(valide=>{
                 if(valide){
                     if(this.selectedOptions.length === 0){
                         this.addform.cat_level = 0
                         this.addform.cat_pid = 0
                     }else if(this.selectedOptions.length===1){
                         this.addform.cat_level = 1
                         this.addform.cat_pid = this.selectedOptions[0]   
                     }else{
                         this.addform.cat_level = 2
                         this.addform.cat_pid = this.selectedOptions[1]    
                     }
                 }
             addCategories(this.addform).then(res=>{
                 if(res.meta.status === 201){
                   this.adddialogFormVisible = false,
                   this.initCategory();
                   this.$message({
                       type:'success',
                       message:res.meta.msg
                   })
                 } 
             })
            })
         }
        },
        components:{
            TreeGrid
        },
        
}
</script>
<style  lang="scss" scoped>
  .catrgory{
     .tree{
         margin-top:10px;
         margin-bottom:10px;
     }
  }
</style>


